<template>
    <div class="contt" :style="cssVars">
        <div class="moter"></div>
        <div class="moter"></div>
        <div class="moter"></div>
        <div class="moter"></div>
        <div class="moter"></div>
        <div class="moter"></div>
        <img src="/src/assets/img/rov-mod.png" alt="???" width="220" class="abs-juzhong">
    </div>
</template>


<script setup>
    import {ref,computed} from 'vue'
    const props=defineProps({
        mo1:Number,
        mo2:Number,
        mo3:Number,
        mo4:Number,
        mo5:Number,
        mo6:Number
    })
    const M=ref(3000)

    const cssVars=computed(()=>{
          return{
              "--hh1": Math.abs(props.mo1- M.value)/8 ,
              "--bgc1":props.mo1>=M.value ? '#f47983' : '#44cef6',
              "--hh2": Math.abs(props.mo2- M.value)/8 ,
              "--bgc2":props.mo2>=M.value ? '#f47983' : '#44cef6',
              "--hh3": Math.abs(props.mo3- M.value)/8 ,
              "--bgc3":props.mo3>=M.value ? '#f47983' : '#44cef6',
              "--hh4": Math.abs(props.mo4- M.value)/8,
              "--bgc4":props.mo4>=M.value ? '#f47983' : '#44cef6',
              "--hh5": Math.abs(props.mo3- M.value)/8 ,
              "--bgc5":props.mo3>=M.value ? '#f47983' : '#44cef6',
              "--hh6": Math.abs(props.mo4- M.value)/8,
              "--bgc6":props.mo4>=M.value ? '#f47983' : '#44cef6',
              
              "--mo56side":'30px',
              "--mo12side":'30px'
          }
    })

</script>


<style scoped>
.contt{
    position: relative;
    /* border: 1px solid blue; */
    height: 200px;
    perspective: 500px;
    width: 220px;
}

.moter{
    width: 5px;
    height: 5px;
    position: absolute;
    z-index: 2;
    
}
.moter:nth-child(1){
    /* height: var(--hh1); */
    background-color: var(--bgc1);
    transform: translateX(20px) rotate(40deg) scaleY(calc(var(--hh1)/5)) ;
    top:20px;
    left: var(--mo12side);
}
.moter:nth-child(2){
    /* height: var(--hh2); */
    background-color: var(--bgc2);
    right: var(--mo12side);
    top:20px;

    transform: rotate(-40deg) scaleY(calc(var(--hh2)/5));
}
.moter:nth-child(3){
    /* height: var(--hh3); */
    background-color: var(--bgc3);
    top:90px;
    transform: scaleY(calc(var(--hh3)/5));
}
.moter:nth-child(4){
    /* height: var(--hh4); */
    background-color: var(--bgc4);
    right: 2px;
    top:90px;
    transform: scaleY(calc(var(--hh4)/5));
}
.moter:nth-child(5){
    /* height: var(--hh5); */
    background-color: var(--bgc5);
    top:160px;
    left: var(--mo56side);
    transform: rotate(-40deg) scaleY(calc(var(--hh5)/5));
}
.moter:nth-child(6){
    /* height: var(--hh6); */
    background-color: var(--bgc6);
    right: var(--mo56side);
    top:160px;
    transform: rotate(40deg) scaleY(calc(var(--hh6)/5));
}
.abs-juzhong{
    /* position: absolute;
    left: 0px;
    top: 0px; */
    z-index: 1;
    transform: rotateX(25deg);
}
</style>